<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover">
		<title>vue-router命名路由</title>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			html,body{
				height:100%;
				width:100%;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<router-link to="/tab/1">Tab1</router-link>
			<router-link :to={name:"tab",params:{id:123}}>Tab2</router-link>
			<router-link to="/tab/3">Tab3</router-link>
			<router-view></router-view>
		</div>
		
		<script src="Vue.js"></script>
		<script src="vue-router.js"></script>
		<script>
			/* 
			 vue-router命名路由
			 命名路由的配置规则:
			 -->为了更加方便的表示路由的路径，可以给路由规则起一个别名，即为“命名路由”
			 const router = new VueRouter({
				 routes:[
					 {
						 path:"/user/:id",
						 name:"user",
						 component:User
					 }
				 ]
			 })
			 
			 <router-link :to="{name:'user',params:{id:123}}">User<router-link>
			 router.push({name:'user',params:{id:123}})
			 */
			const Tab = {
				props:["id"],
				template:`<div>Tab---(ID:{{id}})---组件内容</div>`
			}
			
			const router = new VueRouter({
				routes:[
					{
						path:"/tab/:id",
						name:"tab",
						component:Tab,
						props:true
					}
				]
			})
			
			let vm = new Vue({
				el:"#app",
				data:{},
				router:router
			})
		</script>
	</body>
</html>
